<template>
<view>
<!--pages/topicality/xuequhuafen/xuequhuafen.wxml-->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view>
  <!--  -->
  <view>
    <image src="http://imgbdb3.bendibao.com/xcx/20206/05/2020605104347_15004.jpg" class="main-img">
      <view class="city-box">
        <text>{{city}}</text>
        <!-- <image src="/images/dwicon.png"></image> -->
      </view>
    </image>
    <view style="position: absolute;top:235rpx;width:95%;">
      <view class="change-city">
        <view style="display: flex;align-items: center;">
          <text style="margin-left: 70rpx;">切换城市:</text>
          <picker @change="bindProv" :value="pindex" :range="provPick">
            <view class="sel-city">
              <view class="picker">
                <text>{{provPick[pindex]}}</text>
              </view>
              <image src="/static/images/dwicon.png"></image>
            </view>
          </picker>
          <picker @change="bindCity" :value="cindex" :range="cityPick">
            <view class="sel-city">
              <view class="picker">
                <text>{{cityPick[cindex]}}</text>
              </view>
              <image src="/static/images/dwicon.png"></image>
            </view>
          </picker>
        </view>
        <view class="search">
          <view class="search-box">
            <input placeholder="请输入摆摊位名称查询" placeholder-style="color:#A7A6A6;font-size:25rpx;" @confirm="searchQu" @input="inputQu" :value="inputValue">
          </view>
          <view class="chaxun" @tap="searchBtn">查询</view>
        </view>
        <!-- 区域 -->
        <view class="quyu-box" v-if="quList">
          <view class="qtitle">区域：</view>
          <view class="qucont">
            <view v-for="(item, index) in quList" :key="index" :class="item.checked?'qtextsel':'qtext'" @tap="quselBtn" :data-name="item.cityname">{{item.cityname}}</view>
          </view>
        </view>

      </view>
      <!-- 内容 -->
      <view class="xqcontent">
        <view v-for="(item, index) in baitan" :key="index" style="margin-bottom:20rpx;">
          <view class="xqtitle">
            <image src="/static/images/sys/xf_icon2.png"></image>
            <view class="xqbt">{{item.title}}</view>
          </view>
          <view class="xq-content">
            <view class="xq-item" v-if="item.addr">
              <view class="item-title">摆摊地址</view>
              <view class="item-text" @tap="mapBtn" :data-lng="item.jd" :data-lat="item.wd" :data-title="item.title" :data-addr="item.addr" :data-time="item.time" data-flag="摆摊地址">
                <text selectable="true">{{item.addr}}</text>
                <text style="color:#5195DD">【地图】</text>
              </view>
            </view>
            <view class="xq-item" v-if="item.time">
              <view class="item-title">开放时间</view>
              <view class="item-text">{{item.time}}</view>
            </view>
            <view class="xq-item" v-if="item.is_charge">
              <view class="item-title">是否收费</view>
              <view class="item-text">{{item.is_charge}}</view>
            </view>
            <view class="xfj-btn">
              <view class="xfj-btn-box" v-if="item.url" :data-id="item.id" :data-url="item.url" :data-type="item.type" :data-title="item.title" @tap="btnClick">
                <image src="/static/images/sys/xf_icon3.png" class="img1"></image>
                <text>申请入口</text>
              </view>
              <view class="xfj-btn-box" v-if="item.web_url" :data-id="item.web_id" :data-url="item.web_url" :data-type="item.web_type" :data-title="item.title" @tap="btnClick">
                <image src="/static/images/sys/xf_icon3.png" class="img"></image>
                <text>申请指南</text>
              </view>
            </view>
          </view>
        </view>
        <view v-if="baitan==''" class="null">未查询到相关的摆摊位置信息</view>
      </view>
      <!-- 导粉 -->
      <view class="daofen" v-if="daofen">
        <rich-text :nodes="daofen.content" style="user-select:text;-webkit-user-select:text">
        </rich-text>
      </view>
    </view>
  </view>
</view>
<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :showNav="showNav" :citycode="citycode" :showShare="showShare"></fastnav>
</view>
</template>

<script>
// pages/topicality/baitanhuafen/baitanhuafen.js
// pages/topicality/xiaofeiquan/xiaofeiquan.js
//获取应用实例
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import fastnav from "../../../component/fastnav/fastnav";

export default {
  data() {
    return {
      citycode: "nj",
      city: '南京',
      province: '江苏',
      pindex: 0,
      cindex: 0,
      cityPick: ["选择城市"],
      showtk: false,
      showNav: true,
      // 快捷导航是否展开
      showShare: true // 显示分享按钮
      ,
      provPick: [],
      inputValue: "",
      quList: [],
      baitan: [],
      daofen: false,
      qrcodeimg: "",
      cityArray: "",
      citylist: "",
      infoData: "",
      selContData: []
    };
  },

  components: {
    fastnav
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.getUrl(app.globalData.url).then(res => {
      this.getProvinceData(options.city);
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.infoData ? this.infoData.title : "摆摊位置查询"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.infoData ? this.infoData.title : "摆摊位置查询",
      imageUrl: 'http://imgbdb3.bendibao.com/xcx/20206/05/2020605104347_15004.jpg',
      query: {
        city: this.citycode
      }
    };
  },
  methods: {
    // 获取定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city;
          let citydata = this.citylist.filter(v => {
            if (city.indexOf(v.cityname) != -1) {
              return v;
            }
          });

          if (citydata != '' && city.indexOf(this.city) == -1) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '摆摊位置查询？',
              success: res => {
                if (res.confirm) {
                  this.setData({
                    city: Array.isArray(citydata) ? citydata[0].cityname : this.city,
                    citycode: Array.isArray(citydata) ? citydata[0].citycode : this.citycode,
                    province: Array.isArray(citydata) ? citydata[0].province : this.province,
                    cityPick: ["选择城市"]
                  });
                  let clist = [];
                  this.provPick.forEach((v, k) => {
                    if (v == this.province) {
                      this.setData({
                        pindex: k
                      });
                    }
                  });
                  this.cityArray[this.pindex].citylist.forEach(v => {
                    clist.push(v.cityname);
                  });
                  this.setData({
                    cityPick: this.cityPick.concat(clist)
                  });
                  this.cityPick.forEach((v, k) => {
                    if (v == this.city) {
                      this.setData({
                        cindex: k
                      });
                    }
                  }); // 获取城市公众号二维码

                  this.getQrcode(this.citycode);
                  this.getInfoData(this.citycode);
                }
              }
            });
          }
        }
      });
    },

    // 获取城市公众号二维码
    getQrcode(citycode) {
      util.cityConfig(citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
    },

    // 获取城市
    getProvinceData(optcode) {
      let data = {
        action: 'baitandianwei',
        type: "city"
      };
      util.request('zhuanti.php', data).then(res => {
        this.setData({
          cityArray: res.data.data.city
        });
        let provPick = [];
        let citylist = [];
        let clist = [];
        this.cityArray.forEach(v => {
          v.citylist.forEach(v => {
            citylist.push(v);
          });
          provPick.push(v.province);
          this.setData({
            provPick,
            citylist
          });
        });

        if (this.citylist) {
          this.citylist.forEach((v, k) => {
            if (optcode == v.citycode) {
              this.setData({
                citycode: v.citycode,
                city: v.cityname,
                province: v.province
              });
            } else {
              this.setData({
                citycode: this.citycode,
                city: this.city,
                province: this.province
              });
            }
          });
        }

        this.provPick.forEach((v, k) => {
          if (v == this.province) {
            this.setData({
              pindex: k
            });
          }
        });
        this.cityArray[this.pindex].citylist.forEach(v => {
          clist.push(v.cityname);
        });
        this.setData({
          cityPick: this.cityPick.concat(clist)
        });
        this.cityPick.forEach((v, k) => {
          if (v == this.city) {
            this.setData({
              cindex: k
            });
          }
        }); // 获取城市公众号二维码

        this.getQrcode(this.citycode);
        this.getInfoData();

        if (this.citylist != "" && Array.isArray(this.citylist)) {
          // 获取定位
          this.getLocation();
        }
      });
    },

    // 获取数据
    getInfoData(citycode) {
      let data = {
        action: 'baitandianwei',
        citycode: citycode ? citycode : this.citycode
      };
      util.request('zhuanti.php', data).then(res => {
        if (res.data.data.daofen) {
          res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
        }

        uni.setNavigationBarTitle({
          title: res.data.data ? res.data.data.title : "摆摊位置查询"
        });
        let quList = res.data.data.qu;
        quList.unshift({
          id: 0,
          cityname: "全部"
        });
        quList.forEach((v, k) => {
          if (v.cityname == "全部") {
            v.checked = true;
          } else {
            v.checked = false;
          }
        });
        this.setData({
          infoData: res.data.data,
          baitan: res.data.data.baitan,
          quList,
          daofen: res.data.data.daofen
        });
      });
    },

    // 搜索区域
    searchData(value) {
      let searchRes = [];

      if (this.infoData.baitan) {
        searchRes = this.infoData.baitan.filter(v => {
          if (v.title.includes(value)) {
            return v;
          }
        });
      }

      if (searchRes != '') {
        searchRes.forEach((v, k) => {
          if (k == 0) {
            v.showcont = true;
          } else {
            v.showcont = false;
          }
        });
        this.setData({
          baitan: searchRes
        });
      } else {
        uni.showModal({
          content: '未找到相关摆摊位信息，请重新查询',
          showCancel: false,
          confirmText: "我知道了"
        });
      }
    },

    // 省份选择
    bindProv: function (e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0,
        cityPick: ["选择城市"],
        selContData: [],
        inputValue: ''
      });
      let clist = [];
      this.cityArray[this.pindex].citylist.forEach(v => {
        clist.push(v.cityname);
      });
      this.setData({
        cityPick: this.cityPick.concat(clist)
      });
    },

    // 城市选择
    bindCity(e) {
      this.setData({
        cindex: e.detail.value
      });
      let cityname = this.cityPick[this.cindex];
      this.citylist.forEach(v => {
        if (v.cityname == cityname) {
          let citycode = v.citycode;
          this.setData({
            citycode,
            city: cityname
          });
        }
      }); // 获取城市公众号二维码

      this.getQrcode(this.citycode);
      this.getInfoData(this.citycode);
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    // 搜索输入事件
    inputQu(e) {
      let inputValue = e.detail.value;
      this.setData({
        inputValue
      });
    },

    // 搜索摊位
    searchQu(e) {
      let inputValue = e.detail.value;
      this.setData({
        inputValue
      });
      this.searchData(inputValue);
    },

    // 查询按钮
    searchBtn() {
      this.searchData(this.inputValue);
    },

    // 区域点击按钮
    quselBtn(e) {
      let quname = e.currentTarget.dataset.name;
      this.quList.forEach((v, k) => {
        if (v.cityname == quname) {
          v.checked = true;
        } else {
          v.checked = false;
        }
      });
      this.setData({
        quList: this.quList
      });
      let selContData = [];

      if (quname == "全部") {
        this.setData({
          baitan: this.infoData.baitan
        });
      } else {
        selContData = this.infoData.baitan.filter(v => {
          if (v.addr.includes(quname)) {
            return v;
          }
        });
        this.setData({
          baitan: selContData
        });
      }

      this.baitan.forEach((v, k) => {
        if (k == 0) {
          v.showcont = true;
        } else {
          v.showcont = false;
        }
      });
      this.setData({
        baitan: this.baitan
      });
    },

    // 地图点击事件
    mapBtn(e) {
      let lng = e.currentTarget.dataset.lng;
      let lat = e.currentTarget.dataset.lat;
      let title = e.currentTarget.dataset.title;
      let time = e.currentTarget.dataset.time;
      let addr = e.currentTarget.dataset.addr;
      let flag = e.currentTarget.dataset.flag;
      uni.navigateTo({
        url: '/pages/map/map?lng=' + lng + '&lat=' + lat + '&title=' + title + '&time=' + time + '&addr=' + addr + '&flag=' + flag
      });
    },

    // 申请按钮点击事件
    btnClick(e) {
      let id = e.currentTarget.dataset.id;
      let title = e.currentTarget.dataset.title;
      let url = e.currentTarget.dataset.url;
      let type = e.currentTarget.dataset.type;

      if (id != 0) {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + this.citycode
        });
      } else {
        this.setData({
          showtk: true
        });
        util.navContact(title, url);
      }
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false
      });
    }
  }
};
</script>
<style>
/* pages/topicality/xuequhuafen/xuequhuafen.wxss */
.main-img{width: 100%;height: 276rpx;}
.city-box{background: #ffffff;border-radius: 35rpx;padding: 10rpx 30rpx;position: absolute;
top: 40rpx;right: 30rpx;}
.city-box text{font-size: 30rpx;font-weight: bolder;}
.city-box image{width: 23rpx;height: 15rpx;margin-left: 10rpx;}
.change-city{background:rgba(255,255,255,1);box-shadow:0rpx 6rpx 6rpx rgba(0,0,0,0.16);
opacity:1;border-radius:20rpx;padding:30rpx 0rpx;
margin-left: 36rpx;}
.change-city text{font-size:28rpx;font-family:PingFang SC;font-weight:bold;line-height:36rpx;
color:rgba(20,20,20,1);opacity:1;width: 130rpx;text-align: center;white-space:nowrap;}
.sel-city{display: flex;align-items: center;margin-left: 70rpx;}
.sel-city image{width: 19rpx;height: 10rpx;margin-left: 30rpx}

.search{display: flex;align-items: center;margin: 30rpx 50rpx 20rpx 60rpx;}
.search-box{background:rgba(238,238,238,1);opacity:1;border-radius:28rpx;padding: 8rpx 30rpx;flex: 1}
.search-box input{font-size: 25rpx;font-family:PingFang SC;font-weight:500;line-height:32rpx;}
.chaxun{background:rgba(81,149,221,1);border-radius:28rpx;margin-left: 20rpx;
font-size:25rpx;font-family:PingFang SC;font-weight:500;line-height:32rpx;
color:rgba(255,255,255,1);opacity:1;padding: 10rpx 30rpx;}
.renew{font-size:22rpx;font-family:PingFang SC;font-weight:300;line-height:26rpx;
color:rgba(184,184,184,1);opacity:1;float:right;margin-right: 50rpx;}
/* 区域 */
.quyu-box{display: flex;flex-direction: row;align-items: flex-start;margin-left: 60rpx;}
.qtitle{font-size: 30rpx;color: #666;font-weight: 500;font-family:PingFang SC;padding: 10rpx 0;white-space:nowrap; }
.qucont{display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;}
.qtext{width: 120rpx;font-size: 30rpx;color: #4e4e4e;text-align: center;padding: 10rpx; 
margin-right: 17rpx;margin-bottom: 17rpx;}
.qtextsel{width: 120rpx;font-size: 30rpx;color: #fff;text-align: center;border-radius: 20rpx;background-color: #5395de;padding: 10rpx;margin-right: 17rpx;margin-bottom: 17rpx;}
/* 内容 */
.xqcontent{margin: 50rpx 36rpx 80rpx 36rpx;}
.xqtitle-box{display: flex;align-items: center;justify-content: space-between;}
.xqtitle{display: flex;align-items: center;}
.xqtitle image{width: 18rpx;height: 26rpx;}
.xqbt{font-size:32rpx;font-family:PingFang SC;font-weight:600;line-height:44rpx;color:rgba(20,20,20,1);
opacity:1;margin-left: 20rpx;}
.xqicon{width: 55rpx;height: 55rpx;}
.xq-content{background:rgba(242,244,252,1);opacity:1;border-radius:20rpx;padding: 40rpx 36rpx;
  margin-top: 34rpx;}
.xq-item{display: flex;align-items: flex-start;flex-direction: row;margin-bottom: 32rpx;}
.item-title{font-size:26rpx;font-family:PingFang SC;font-weight:bold;
line-height:36rpx;color:rgba(20,20,20,1);opacity:1;white-space:nowrap; margin-right: 38rpx;}
.item-text{border-bottom:1rpx solid rgba(236,236,236,1);opacity:1;padding-bottom: 26rpx;
font-size:26rpx;font-family:PingFang SC;font-weight:500;line-height:36rpx;color:rgba(90,90,90,1);flex: 1;
word-break:break-all;}
.null{font-size: 32rpx;color: #999999;text-align: center;}

.xfj-btn{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.xfj-btn-box{background:#D9E6F8;border-radius:38rpx;display: flex;flex-direction: row;align-items: center;
padding: 15rpx 25rpx;}
.img1{width: 25rpx;height: 25rpx;margin-right: 8rpx;}
.img{width: 20rpx;height: 25rpx;margin-right: 8rpx;}
.xfj-btn-box text{font-size:26rpx;font-family:PingFang SC;font-weight:bold;
line-height:36rpx;color:rgba(81,149,221,1);opacity:1;white-space:nowrap;}

/* 导粉 */
.daofen{margin-bottom:80rpx;text-align: center;}
.p_class{margin:10rpx 30rpx;line-height: 50rpx;}
</style>